<template>
  <div>
    <div style="width:30%;margin-left:1%">
      <input
        type="search"
        v-on:keyup.enter="search"
        v-model.trim="input"
        placeholder="请输入要搜索的内容"
        class="input_text_nav"
      />
      &nbsp;
      <button class="input_nav" @click="search">搜索</button>
      &nbsp;
      <button class="input_nav" @click="reset">重置</button>
    </div>
    <el-table :data="tolist" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="所属店铺">
              <span>{{ props.row.shop }}</span>
            </el-form-item>
            <el-form-item label="商品 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="店铺 ID">
              <span>{{ props.row.shopId }}</span>
            </el-form-item>
            <el-form-item label="商品分类">
              <span>{{ props.row.category }}</span>
            </el-form-item>
            <el-form-item label="店铺地址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ props.row.desc }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="商品 ID" prop="id"></el-table-column>
      <el-table-column label="商品名称" prop="name"></el-table-column>
      <el-table-column label="描述" prop="desc">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index,tolist,tableData)"
            type="text"
            size="small"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 6, 7]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
    ></el-pagination>
  </div>
</template>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      tableData: [],
      num: 5,
      tolist: [],
      input: '',
      item: []
    }
  },
  methods: {
    // ui删除
    deleteRow (index, rows, tableData) {
      rows.splice(index, 1);
      tableData.splice(index, 1);
    },
    //重置页面
    reset () {
      this.$router.go(0)
    },
    // 搜索筛选
    search () {
      if (this.input === '') {
        this.tolist = [];
      } else {
        this.tolist = [];
        this.tableData.forEach((ele) => {

          if (ele.name.includes(this.input)) {

            this.tolist.push(ele)
          }
        })
      }

    },
    // 分页
    handleSizeChange (val) {
      this.tolist = []
      this.num = val
      for (let a = 0; a < val; a++) {
        this.tolist.push(this.tableData[a])
      }
    },
    handleCurrentChange (val) {
      console.log(val)
      this.tolist = []
      let xian = this.num * val
      if (xian > this.tableData.length) {
        xian = this.tableData.length
      }
      let qian = this.num * (val - 1)
      for (let a = qian; a < xian; a++) {
        this.tolist.push(this.tableData[a])
      }
    },
  },
  mounted () {
    axios
      .get('http://localhost:8080/shoplist.json')
      .then((res) => {
        console.log(res.data)
        this.tableData = res.data
        // 分页初始化 初始显示的数量
        for (var a = 0; a < 5; a++) {
          this.tolist.push(this.tableData[a]);
        }
      })
      .catch((err) => {
        console.error(err)
      })
  },
}

</script>
<style scoped>
.input_nav {
  border: 1px solid #b3c0d1;
  background: #b3c0d1;
}
.input_text_nav {
  border: 2px solid #b3c0d1;
}
</style>
  
